<template>
    <div class="roleContext">
        <div class="userInfomation">
            <div class="roleManage ">
              <el-tooltip class="item" effect="dark" content="新增" placement="top-start">
                <el-button type="primary" @click="createRole"  size="small" icon="el-icon-plus"></el-button>
              </el-tooltip>

            </div>
               <!-- //弹窗 -->
                <add-user v-if="show" @closeDialog='closeDialog' :list="list"></add-user>
                <modify-user v-if="showTip" @closeDialog='closeDialog' :makeUser="makeUser" ></modify-user>
            <div class="roleName">
                <!-- <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table> -->
                <el-table
                    :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    border
                    highlight-current-row
                    :header-cell-style="getRowClass"
                    style="width: 100%">
                    <el-table-column
                    prop="username"
                    label="用户名"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    align="center" >
                    </el-table-column>
                    <el-table-column
                    prop="roleDesc"
                    label="角色"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="birthday"
                    label="出生日期"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="createtime"
                    label="创建时间"
                    align="center"
                    :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    fixed="right"
                    align="center">
                    <template slot-scope="scope">
                        <el-button  type="text" icon="edit" size='mini' @click="modify(scope.row.id)">修改</el-button>
                        <el-button type="text" size="mini" @click="removeUser(scope.row.id)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
          <div class="pgetest">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageCount">
            </el-pagination>
          </div>
        </div>
    </div>
</template>
<script>
// import VTable from "components/common/PageTable/VTable"
import addUser from 'components/base/UserManage/AddUser.vue'
import modifyUser from 'components/base/UserManage/ModifyUser.vue'

export default {
    data(){
        return{
            //弹框的显示与隐藏
            list:[],
            show:false,
            showTip:false,
            loading2:true,
            makeUser:{},
            pageIndex:1,
            pageSize:10,
            pageCount:0,
            currentPage:1,
            // tableParams:{
            //     dataArray:[],
            //     showMultiSelection:false,
            //     columnArray:[
            //         {label: '用户名', prop: '',  sortable: false},
            //         {label: '姓名', prop: 'roleDesc',  sortable: false},
            //         {label: '角色', prop: 'roleDescribe',  sortable: false},
            //         {label: '出生日期', prop: 'birthday',sortable: false},
            //         {label: '创建时间', prop: 'createtime',sortable: false}
            //     ],
            //     rowHandle:{
            //         deleted:{
            //             show:false
            //         },
            //         update:{
            //             show:false
            //         }
            //     }
            // }
        }
    },
    created(){
        this.init()
    },

    methods:{
        //添加角色
        createRole(){
           this.show=true
        },
        init(){
            this.userInfo()
        },
        handleSizeChange(val) {
          this.pageSize =val;
        },
        handleCurrentChange(val) {
          this.currentPage = val;
        },
        //初始化用户列表
        userInfo(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.list=data.data
                    this.pageCount=data.data.length
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.sysList(parmas,success)
        },
          //格式化时间
        dateFormat(row, column, cellValue, index){
            if(cellValue==null){
                return null
            }else{
                return cellValue.slice(0,10)
            }
        },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex == 0) {
          return 'background:#fafafa;color:rgba(0, 0, 0, 0.85)'
        } else {
          return ''
        }
      },
        //修改用户接口（根据id）
        modify(id){
            this.showTip=true
            let parmas={
               id:id
            }
            let success=data=>{
                if(data.code=='OK'){
                    for(var i in data.data){
                        this.makeUser  = data.data[i]
                    }
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.sysSelectOne(parmas,success)
        },
        //删除用户
        removeUser(id){
            this.$confirm('确定删除此用户?', '提示', {
                confirmButtonText: '确定',
                showCancelButton: false,
                type: 'warning'
            }).then(() => {
                let parmas={
                    id:id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.userInfo()
                        this.$message.success('删除成功')
                    }
                }
                this.api.sysDelete(parmas,success)

            }).catch(() => {
                this.$message.error('取消删除')
            })
        },
        //关闭弹窗
        closeDialog(){
            this.show=false;
            this.showTip=false;
        },
    },
    components:{
        modifyUser,addUser,
        // vTable
    }
}
</script>
<style lang="scss" scoped>
.roleContext{
   .userInfomation{
       .roleManage{
            height:45px;
            line-height:45px;
         }
       .pgetest{
         text-align:right;
         padding:15px 0;
       }
   }
}
</style>

